import { IRootReducerState } from '@/store/root-reducer';
import { parentToTree } from '@/utils/converter';
import { Checkbox, Input, Tree } from '@douyinfe/semi-ui';
import { useEffect, useMemo } from 'react';
import { useSelector, shallowEqual } from 'react-redux';
import * as action from '@/redux/role/role-actions';
import { useDispatch } from 'react-redux';
import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';

const AppTree = ({
  roleId,
  onSelectItem,
}: {
  roleId: any;
  onSelectItem: (e: any) => void;
}) => {
  const dispatch = useDispatch<any>();
  const { role } = useSelector<IRootReducerState, any>(
    (state) => ({ role: state.role }),
    shallowEqual
  );
  const { entities, appGroupEntities } = role;
  const treeData = [
    {
      label: 'Asia',
      value: 'Asia',
      key: '0',
      children: [
        {
          label: 'China',
          value: 'China',
          key: '0-0',
          children: [
            {
              label: 'Beijing',
              value: 'Beijing',
              key: '0-0-0',
            },
            {
              label: 'Shanghai',
              value: 'Shanghai',
              key: '0-0-1',
            },
          ],
        },
        {
          label: 'Japan',
          value: 'Japan',
          key: '0-1',
          children: [
            {
              label: 'Osaka',
              value: 'Osaka',
              key: '0-1-0',
            },
          ],
        },
      ],
    },
    {
      label: 'North America',
      value: 'North America',
      key: '1',
      children: [
        {
          label: 'United States',
          value: 'United States',
          key: '1-0',
        },
        {
          label: 'Canada',
          value: 'Canada',
          key: '1-1',
        },
      ],
    },
  ];

  console.log('左侧树状数据--->', appGroupEntities);

  const renderLabel = ({
    className,
    onExpand,
    data,
    onCheck,
    checkStatus,
    expandIcon,
  }: any) => {
    const { label } = data;
    const isLeaf = !(data.children && data.children.length);
    return (
      <li className={className} role='treeitem'>
        {isLeaf ? null : expandIcon}
        <div
          onClick={onCheck}
          role='checkbox'
          tabIndex={0}
          aria-checked={checkStatus.checked}
          className={`${isLeaf ? 'ml-5' : ''}`}
        >
          <Checkbox
            indeterminate={checkStatus.halfChecked}
            checked={checkStatus.checked}
            style={{ marginRight: 8 }}
          />
        </div>

        <span
          onClick={() => {
            isLeaf && onSelectItem(data);
          }}
        >
          {label}
        </span>
      </li>
    );
  };

  const treeDatas = useMemo(() => {
    let tempTree = [];
    tempTree = Object.keys(appGroupEntities).map((group: any) => {
      return {
        label: group,
        value: group,
        key: group,
        children: appGroupEntities[group].map((app: any) => {
          let tempApp = {
            ...app,
            label: app.title,
            value: app.id,
            key: app.id,
            iconName: app.icon,
          };
          delete tempApp.icon;

          return tempApp;
        }),
      };
    });
    return tempTree;
  }, [appGroupEntities]);

  useEffect(() => {
    dispatch(action.fetchAppGroupItems());
  }, []);

  return (
    <Tree
      expandAction={false}
      treeData={treeDatas}
      multiple
      filterTreeNode
      expandAll
      // onSelect={onSelectItem}
      renderFullLabel={renderLabel}
    />
  );
};

export default AppTree;
